<template>
	<view class="container">
		<view class="container-limit">
			<u-search height="72" bg-color="#F1F3F8" placeholder="输入计划名称" v-model="searchValue"></u-search>
			<y-seat height="30"></y-seat>
			<view class="plan-list" v-for="(item,index) in plan" :key="index">
				<view class="plan-header">
					<text>{{item.title}}</text>
				</view>
				<view class="plan-item" hover-class="small-hover" v-for="(i,j) in item.list" :key="j" @click="clickPlan(i)">
					<view class="plan-item-icon">
						<u-icon name="bookmark" color="#7D6AED"></u-icon>
					</view>
					<view class="plan-item-text">
						<text>{{i.name}}</text>
						<text class="plan-label" v-for="(label,labelIndex) in i.label" :key="labelIndex">{{label}}</text>
					</view>
				</view>
				
			</view>

		</view>

	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	import {Plan} from '../../model/plan.js'
	export default {
		data() {
			return {
				searchValue: '',
				plan:[
					{
						"Id":"1",
						"title":"个人计划",
						"list":[
							{
								"name":"字节跳动求职计划",
								"label":["#工作","#求职"]
							},{
								"name":"每日喝水计划",
								"label":["#习惯","养成"]
							}
						]
					},
					{
						"title":"共同计划",
						"list":[
							{
								"name":"情侣基金计划",
								"label":["#情侣","#基金"]
							},{
								"name":"健身计划",
								"label":["#习惯"]
							}
						]
					}
				]
			};
		},
		mounted() {
			const that = this;
			uni.showLoading({
				title:"加载中"
			})
			Plan.getPlanList().then(res=>{
				if(res) that.plan=res;
				uni.hideLoading()
			});
		},
		methods:{
			clickPlan(e){
				let pages = getCurrentPages();  //获取所有页面栈实例列表
				let nowPage = pages[ pages.length - 1];  //当前页页面实例
				let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
				prevPage.$vm.planName = e.name;   //修改上一页dat
				console.log(e)
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
	.container-limit {
		padding: 30rpx 58rpx;
	}

	.plan-list {
		margin-bottom: 10rpx;
		padding: 15rpx 0;
	
		.plan-header{
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(0,0,0,0.80);
			margin-bottom: 20rpx;
		}
		.plan-item{
			display: flex;
			padding: 16rpx 0;
			border-bottom: 1px solid rgba(0,0,0,0.08);
			margin-top: 20rpx;
		}
		.plan-item-icon{
			height: 100%;
			vertical-align: middle;
			padding-right: 20rpx;
		}
		.plan-item-text{
			font-size: 22rpx;
			font-weight: 500;
			color: #000000;
			text{
				display: block;
			}
		}
		.plan-label{
			color: rgba(0,0,0,0.60);
			display: inline!important;
			
			&::after{
				content: ',';
			}
			&:nth-last-child(1){
				&::after{
					content: '';
				}
			}
		}
		
	}
</style>
